<template>
  <div class="dashboard-container body-min-width">
    <!--    <h2 class="head-big-title">{{// newData.dealerName?newData.dealerName:'Create Dealer'}}</h2>-->
    <h2 class="head-big-title">Cipta Dealer Utama</h2>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <div style="width: 92%;margin: 0 4% 30px 4%;background-color: white;text-align: left;padding: 10px 1% 80px 2%;">
      <el-form
        v-model="newData"
        :inline="true"
        label-position="top"
        size="medium"
        label-width="110px">
        <h2 class="big-title">Perincian Log Masuk</h2>
        <el-form-item label="Emel" class="one-hang">
          <el-input v-model="newData.loginEmail" placeholder="Emel" @blur="checkEmail($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Kata Laluan: " class="two-hang">
          <el-input v-model="newData.registerPwd" type="password" placeholder="******"></el-input>
        </el-form-item>
        <el-form-item label="Pasti Kata Laluan: " class="two-hang">
          <el-input v-model="repwd" type="password" placeholder="******"></el-input>
        </el-form-item>
        <h2 class="big-title">Perincian Pendaftaran</h2>
        <el-form-item label="Nama: " class="two-hang">
          <el-input v-model="newData.dealerName" placeholder="Nama" @blur="checkName($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="No Pendaftaran Syarikat: " class="two-hang">
          <el-input v-model="newData.syarikatCode" placeholder="Number" @blur="checkCompanyRegNo($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Logo Syarikat: " class="four-hang" style="height: 138px;position: relative;">
          <el-upload
            ref="upload"
            style="display: inline-block;width: 188px;height: 88px;"
            :limit="1"
            action="http://"
            accept=".jpg, .png"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :file-list="fileList"
            list-type="picture"
            :http-request="uploadFile"
            :auto-upload="false">
            <el-button v-show="!(fileList.length && fileList.length > 0)" slot="trigger" size="small" type="primary">Logo</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="SSM: " class="four-hang" style="height: 138px;position: relative;">
          <el-upload
            style="display: inline-block;width: 188px;height: 88px;"
            ref="uploadSSM"
            multiple
            :limit="1"
            action="http"
            :on-change="handleChangeSSM"
            :on-remove="handleRemoveSSM"
            :on-exceed="handleExceedSSM"
            :file-list="fileListSSM"
            list-type="picture"
            :http-request="uploadFileSSM"
            :auto-upload="false">
            <el-button v-show="!(fileListSSM.length && fileListSSM.length > 0)" slot="trigger" size="small" type="primary">SSM</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="Nombor Telefon: " class="two-hang">
          <el-input v-model="newData.phoneNumber" placeholder="Nombor Telefon" @blur="checkPhoneNo($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Jenis Syarikat: " class="two-hang">
          <el-select v-model="newData.typeCompany" placeholder="Jenis">
            <el-option label="Berhad" :value="0"></el-option>
            <el-option label="Sdn Bhd" :value="1"></el-option>
            <el-option label="Partnership" :value="2"></el-option>
            <el-option label="Enterprise" :value="3"></el-option>
            <el-option label="Others" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Jenis Perniagaan: " class="two-hang">
          <el-input v-model="newData.typeBusiness" placeholder="Jenis"></el-input>
        </el-form-item>
        <el-form-item label="Emel Syarikat: " class="two-hang">
          <el-input v-model="newData.emailAddress" placeholder="Emel" @blur="checkEmail($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Kod Dealer Utama: " class="two-hang">
          <el-input v-model="newData.inviteCode" placeholder="Kod Dealer Utama" @blur="checkMasterDealerCode($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Kawasan: " class="one-hang">
          <el-select v-model="newData.region" placeholder="Kawasan">
            <el-option label="Tengah" :value="0"></el-option>
            <el-option label="Timur" :value="1"></el-option>
            <el-option label="Barat Malaysia" :value="2"></el-option>
            <el-option label="Utara" :value="3"></el-option>
            <el-option label="Selatan" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <h2 class="big-title">Pembayaran</h2>
        <el-checkbox
          v-model="newData.needPay"
          label="Payment through Owner's Payment Gateway"
          style="font-size: 14px;position: relative;top: 6px;"
          name="type"
          :true-label="1"
          :false-label="0"></el-checkbox>
        <h2 class="big-title">Infomasi Bil</h2>
        <el-form-item label="Nama: " class="two-hang">
          <el-input v-model="newData.shopAddr.name" placeholder="Nama" @blur="checkName($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Nombor Telefon: " class="two-hang">
          <el-input v-model="newData.shopAddr.phoneNumber" placeholder="Nombor Telefon" @blur="checkPhoneNo($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 1: " class="one-hang">
          <el-input v-model="newData.shopAddr.streetAddress" placeholder="Alamat 1" @blur="checkAddress($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 2: " class="one-hang">
          <el-input v-model="newData.shopAddr.regionalAddress" placeholder="Alamat 2" @blur="checkAddress2($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Bandar: " class="two-hang">
          <el-input v-model="newData.shopAddr.city" placeholder="Bandar"></el-input>
        </el-form-item>
        <el-form-item label="Poskod: " class="two-hang">
          <el-input v-model="newData.shopAddr.postCode" placeholder="Poskod" @blur="checkPostCode($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Negara: " class="two-hang">
          <el-select v-model="newData.shopAddr.country" placeholder="Negara">
            <el-option label="Malaysia" value="Malaysia"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Negeri: " class="two-hang">
          <el-select v-model="newData.shopAddr.region" placeholder="Negeri">
            <el-option v-for="(item, index) in $regionList" :key="index" :label="item.en" :value="item.en"></el-option>
          </el-select>
        </el-form-item>
        <h2 class="big-title">Infomasi Penghantaran
          <el-checkbox
            v-model="shopAddrMATCHbillingAddr"
            label="Infomasi Bil mengikut Infomasi Penghantaran"
            style="margin-left: 6%;font-size: 14px;position: relative;top: 6px;"
            name="type"
            @change="changeMatch"></el-checkbox>
        </h2>
        <el-form-item label="Nama: " class="two-hang">
          <el-input v-model="newData.billingAddr.name" placeholder="Nama" @blur="checkName($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Nombor Telefon: " class="two-hang">
          <el-input v-model="newData.billingAddr.phoneNumber" placeholder="Nombor Telefon" @blur="checkPhoneNo($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 1: " class="one-hang">
          <el-input v-model="newData.billingAddr.streetAddress" placeholder="Alamat 1" @blur="checkAddress($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 2: " class="one-hang">
          <el-input v-model="newData.billingAddr.regionalAddress" placeholder="Alamat 2" @blur="checkAddress2($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Bandar: " class="two-hang">
          <el-input v-model="newData.billingAddr.city" placeholder="Bandar"></el-input>
        </el-form-item>
        <el-form-item label="Poskod: " class="two-hang">
          <el-input v-model="newData.billingAddr.postCode" placeholder="Poskod" @blur="checkPostCode($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Negara: " class="two-hang">
          <el-select v-model="newData.billingAddr.country" placeholder="Negara">
            <el-option label="Malaysia" value="Malaysia"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Negeri: " class="two-hang">
          <el-select v-model="newData.billingAddr.region" placeholder="Negeri">
            <el-option v-for="(item, index) in $regionList" :key="index" :label="item.en" :value="item.en"></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-button type="primary" round style="float: right;margin: 16px 2% 20px 88px;" @click="saveDataNow">Cipta</el-button>
          <el-button round style="float: right;margin: 16px 2% 20px 88px;" @click="$router.push({path: '/Customers'})">Balik</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { newDealerApi, uploadFileApi } from '@/api/user'
const testData = {
  shopAddr: {
    "name": "李牧",
    "phoneNumber": "5467457",
    "streetAddress": "7567",
    "regionalAddress": "234",
    "city": "56757",
    "postCode": "57",
    "country": "Malaysia",
    "region": "Kelantan"
  },
  billingAddr: {
    "name": "李牧",
    "phoneNumber": "5467457",
    "streetAddress": "7567",
    "regionalAddress": "234",
    "city": "56757",
    "postCode": "57",
    "country": "Malaysia",
    "region": "Kelantan"
  },
  certificateUrl: "/images/2021-03-29/logo/C2A53F5B8E5947AD86B23B0D5A2A9CFF.png",
  companyType: 0,
  needPay : 1,
  dealerName: "李牧",
  emailAddress: "wensstestm@ff.cn",
  inviteCode: "789658",
  loginEmail: "wensstestm@ff.cn",
  logoUrl: "/images/2021-03-29/logo/49B55FDCD4AC4CB7BA0151477AE3B2A9.png",
  newType: 1,
  phoneNumber: "5467457",
  region: 1,
  registerPwd: "abc123456",
  syarikatCode: "5345",
  typeBusiness: "535",
  typeCompany: 2
}
export default {
  name: 'CustomersDetails',
  data() {
    return {
      newData: {
        needPay: 0,
        shopAddr: {},
        billingAddr: {}
      },
      fileList: [],
      fileListSSM: [],
      searchFormData: {},
      isNeedPay: false,
      shopAddrMATCHbillingAddr: false,
      stock: '',
      showPic: '',
      fileData: new FormData(),
      fileDataSSM: new FormData(),
      repwd: '',
      uploadData: {
        fieldData: {}
      },
      orderChart: '',
      emailPattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/g,
      namePattern: /^[A-Za-z ]+$/g,
      phonePattern: /^[0-9\-]+$/g,
      alphanum: /^[A-Za-z0-9 ]+$/g,
      addressPattern: /^[A-Za-z0-9\.\-\(\)\,\/\ ]+$/g,
      postCodePattern: /^([0-9]{5})+$/g
    }
  },
  mounted() {
    // this.newData = testData // 测试数据
  },
  methods: {
    checkEmail: function(email){
      if(email && email !== ""){
        if(email.match(this.emailPattern)){
          console.log('email ok');
          return true;
        }
      }
      this.$message.warning('Sila masukkan e-mel yang sah!')
      console.log('email x');
      return false;
    },
    changeNew() {
      this.$forceUpdate()
    },
    checkName:function(name){
      if(name && name !== ""){
        if(name.match(this.namePattern)){
          console.log('name ok');
          return true;
        }
      }
      this.$message({
        message: 'Sila masukkan nama yang sah',
        type: 'error'
      })
      console.log('name x');
      return false;
    },
    checkPhoneNo:function(phone){
      if(phone && phone !== ""){
        if(phone.match(this.phonePattern)){
          console.log('phone ok');
          return true;
        }
      }
      this.$message({
        message: 'Sila masukkan no telefon yang betul!',
        type: 'error'
      })
      console.log('phone x');
      return false;
    },
    checkCompanyRegNo:function(compRegNo){
      if(compRegNo && compRegNo !== ""){
        if(compRegNo.match(this.alphanum)){
          console.log('compreg ok');
          return true;
        }
      }
      this.$message({
        message: 'Sila masukkan no pendaftaran syarikat yang sah!',
        type: 'error'
      })
      console.log('compreg x');
      return false;
    },
    checkMasterDealerCode:function(mdCode){
      if(mdCode && mdCode !== ""){
        if(mdCode.match(this.alphanum)){
          console.log('mdcode ok');
          return true;
        }
      }
      this.$message({
        message: 'Sila masukkan kod dealer utama yang sah!',
        type: 'error'
      })
      console.log('mdcode x');
      return false;
    },
    checkAddress:function(addr){
      if(addr && addr !== ""){
        if(addr.match(this.addressPattern)){
          console.log('addr1 ok');
          return true;
        }
      }
      this.$message({
        message: 'Sila masukkan alamat 1 yang sah!',
        type: 'error'
      })
      console.log('addr1 x');
      return false;
    },
    checkAddress2:function(addr2){
      if(addr2 && addr2 !== ""){
        if(addr2.match(this.addressPattern)){
          console.log('addr2 ok');
          return true;
        }
      }else{
        console.log('addr2 ok');
        return true;
      }
      this.$message({
        message: 'Sila masukkan alamat 2 yang sah!',
        type: 'error'
      })
      console.log('addr2 x');
      return false;
    },
    checkPostCode:function(postcode){
      if(postcode && postcode !== ""){
        if(postcode.match(this.postCodePattern)){
          console.log('postcode ok');
          return true;
        }
      }
      this.$message({
        message: 'Sila masukkan poskod yang sah!',
        type: 'error'
      })
      console.log('postcode x');
      return false;
    },
    changeMatch() {
      if (this.shopAddrMATCHbillingAddr) {
        this.newData.shopAddr.region = this.newData.billingAddr.region
        this.newData.shopAddr.country = this.newData.billingAddr.country
        this.newData.shopAddr.name = this.newData.billingAddr.name
        this.newData.shopAddr.phoneNumber = this.newData.billingAddr.phoneNumber
        this.newData.shopAddr.streetAddress = this.newData.billingAddr.streetAddress
        this.newData.shopAddr.regionalAddress = this.newData.billingAddr.regionalAddress
        this.newData.shopAddr.city = this.newData.billingAddr.city
        this.newData.shopAddr.postCode = this.newData.billingAddr.postCode
      } else {
        this.newData.billingAddr = {}
      }
    },
    uploadFile(file) {
      this.fileData.append('mf', file.file)
    }, // 上传文件
    submitUpload() {
      if (this.fileList.length === 0) {
        this.$message({
          message: 'Sila pilih fail',
          type: 'warning'
        })
      } else {
        const isLt2M = this.fileList.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB!')
        } else {
          this.fileData = new FormData()
          this.$refs.upload.submit()
          this.fileData.append('num', 0)
          this.fileData.append('index', 1)
          uploadFileApi(this.fileData).then((response) => {
            this.$message({
              message: 'Berjaya muat naik!',
              type: 'success'
            })
            this.newData.logoUrl = response.data.picUrl[0]
          })
        }
      }
    }, // 上传到服务器
    handleRemove(file, fileList) {
      this.showPic = file.url
      this.fileList = fileList
    }, // 移除
    handleExceed(files, fileList) {
      this.$message.warning(`Hanya 3 fail boleh dipilih`)
    }, // 选取文件超过数量提示
    handleChange(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilihkan telah wujud!')
        fileList.pop()
      }
      this.fileList = fileList
      this.submitUpload()
    }, // 监控上传文件列表
    uploadFileSSM(file) {
      this.fileDataSSM.append('mf', file.file)
    }, // 上传文件
    submitUploadSSM() {
      if (this.fileListSSM.length === 0) {
        this.$message({
          message: 'Sila pilih fail',
          type: 'warning'
        })
      } else {
        const isLt2M = this.fileListSSM.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dimuat naikkan tidak melebihi 1MB!')
        } else {
          this.fileDataSSM = new FormData()
          this.$refs.uploadSSM.submit()
          this.fileDataSSM.append('index', 0)
          this.fileDataSSM.append('num', 0)
          uploadFileApi(this.fileDataSSM).then((response) => {
            this.$message({
              message: 'Berjaya muat naik!',
              type: 'success'
            })
            this.newData.certificateUrl = response.data.picUrl[0]
          })
        }
      }
    }, // 上传到服务器
    handleRemoveSSM(file, fileList) {
      this.fileListSSM = fileList
    }, // 移除
    handleExceedSSM(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChangeSSM(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileListSSM = fileList
      this.submitUploadSSM()
    }, // 监控上传文件列表
    saveDataNow() {
      this.newData.companyType = 0
      this.newData.newType = 1
      newDealerApi(this.newData).then(res => {
        this.$message({
          message: 'Berjaya cipta!',
          type: 'success'
        })
        this.$router.push({ path: '/Customers' })
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }
  .one-hang{
    display: block;
    width: 100%;
    margin: 0;
    .el-input{
      width: 98%;
    }
    .el-select{
      width: 98%;
    }
  }
  .two-hang{
    display: inline-block;
    width: 50%;
    margin: 0;
    .el-input{
      width: 96%;
    }
    .el-select{
      width: 96%;
    }
  }
  .four-hang{
    display: inline-block;
    width: 25%;
    margin: 0;
  }
  .three-hang{
    width: 30%;
    margin-right: 3%;
  }
</style>
<style scoped>
  /deep/.head-search label{
    line-height: 30px;
  }
  /deep/ .el-upload-list{
    width: 88px;
    padding: 0;
    margin: 0;
    position: relative;
    bottom: 60px;
  }
  /deep/ .el-upload-list img{
    width: 70px;
    height: 70px;
  }
  .big-title{
    text-align: left;
    font-size: 19px;
    margin: 20px 0;
  }
</style>
